<template>
  <div class="up" v-show="isShow">
    <van-icon @click="up" name="arrow-up" />
  </div>
</template>

<script>
export default {
  name: 'go-top',
  data () {
    return {
      isShow: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.set, true)
  },
  methods: {
    set () {
      var h =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (h > 60) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    up () {
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.up {
  width: 30px;
  background: #f3f3f3;
  height: 30px;
  border-radius: 50%;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 120px;
  justify-content: center;
  align-items: center;
  .van-icon-arrow-up {
    font-size: 20px;
  }
}
</style>
